<template>
    <el-tabs v-model="id">
        <el-tab-pane v-for="item in data" :label="item.nickname" :key="data.id" :name="item.id">
            <Article :data="articleData"/>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="pageSize"
                    @current-change="changePage"
            >
            </el-pagination>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import Article from "./Article";
    export default {
        name: "Selector",
        components: {Article},
        props:{
            data: {
                type: Array,
                default: () => [
                    {name: "全部", id: 0},
                ]
            }
        },
        data(){
            return{
                id: '0', // 选择标签的id
                total: 0, // 数据量
                articleData: [],
                pageSize: 10, // 每页数据条数
            }
        },
        computed: {
            query() {
                return this.$store.state.article.searchParams;
            }
        },
        methods:{
            /**
             * 换页
             */
            async changePage(page){
                this.articleData = await this.$store.dispatch("article/listSimple", {uid:this.id,page:page,record:this.pageSize})
            },
        },
        watch: {
            /**
             * 标签选择变化时，重新查询文章
             */
            id:{
                immediate: true,
                async handler(newValue){
                    this.total = await this.$store.dispatch("article/countTotal", {uid:newValue, query: this.query});
                    this.articleData = await this.$store.dispatch("article/listSimple", {uid:newValue,page:1,record:this.pageSize, query: this.query})
                }
            },
            query: {
                async handler(newValue){
                    this.id = '1';
                    this.total = await this.$store.dispatch("article/countTotal", {uid:1, query: newValue});
                    this.articleData = await this.$store.dispatch("article/listSimple", {uid:1,page:1,record:this.pageSize, query: newValue})
                }
            }
        },
        mounted() {
            // 如果是查询跳转的话，会直接选择查询标签
            if (this.$route.params['query']) {
                this.id = '1';
            }
        }
    }
</script>

<style scoped>

</style>